<div id="controller-communication" ng-controller="ControllerCommunicationCtrl">
  <div class="toolbar">
    <i class="feature-name"><a name="data-bind">Controller Communication</a></i>
    <i class="fa fa-lightbulb-o fa-lg tool-btn" popover-placement="bottom" popover-template="'transitionTips'" popover-append-to-body="true" ng-click="toggleTips($event)" tooltip="core tips"></i>
    <i class="fa fa-star fa-lg" tooltip="difficulty coefficient"></i>
    <i class="fa fa-lg pull-right tool-btn" ng-class="{'fa-code': !showCode,'fa-motorcycle': showCode}" tooltip="{{toggleCodeTip}}" ng-click="toggleCode()"></i>
    <script type="text/ng-template" id="transitionTips">
      <p class="bg-primary">$broadcast -- dispatches the event downwards to all child scopes.</p>
      <p class="bg-success">$emit -- dispatches the event upwards through the scope hierarchy to the $rootScope.</p>
    </script>
  </div>
  <div class="content">
    <div class="example" ng-class="{'hidden': showCode}">
        <div ng-controller="ParentCtrl" class="col-md-6 bg-warning" style="height:585px;">
          <h3>{{ myResponse }}</h3>
          <div style="height:400px;margin-top:50px;">
            <div ng-controller="SelfCtrl" class="col-md-6 bg-success" style="height:100%;text-align:center;">
              <h3>Self Node</h3>
              <button type="button" class="btn btn-primary" style="margin-top:20px;font-size:1.5em;" ng-click="makeInvitation()">I wanna treate you to diner</button>
              <div ng-controller="ChildCtrl" class="bg-danger" style="height:200px;margin-top:70px;padding-top:1px;">
                <h3>{{ myResponse }}</h3>
              </div>
            </div>
            <div ng-controller="BrotherCtrl" class="col-md-6 bg-info" style="height:100%;">
              <h3>{{ myResponse }}</h3>
            </div>
          </div>
          <button type="button" class="btn btn-primary pull-right" style="margin-top:30px;font-size:1.5em;" ng-click="reset()">Reset</button>
        </div>
        <div class="col-md-6">
          <img src="controller-communication.svg" width="100%">
        </div>
    </div>
    <tabset class="pane-sourcecode" ng-class="{'hidden': !showCode}">
      <tab heading="html code">
        <pre>
          <code class="html" ng-non-bindable>
&lt;div ng-controller=&quot;ParentCtrl&quot;&gt;
  &lt;h3&gt;{{ myResponse }}&lt;/h3&gt;
    &lt;div ng-controller=&quot;SelfCtrl&quot;&gt;
      &lt;h3&gt;Self Node&lt;/h3&gt;
      &lt;button type=&quot;button&quot; ng-click=&quot;makeInvitation()&quot;&gt;I wanna treate you to diner&lt;/button&gt;
      &lt;div ng-controller=&quot;ChildCtrl&quot;&gt;
        &lt;h3&gt;{{ myResponse }}&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div ng-controller=&quot;BrotherCtrl&quot;&gt;
      &lt;h3&gt;{{ myResponse }}&lt;/h3&gt;
    &lt;/div&gt;
  &lt;button type=&quot;button&quot; ng-click=&quot;reset()&quot;&gt;Reset&lt;/button&gt;
&lt;/div&gt;
          </code>
        </pre>
      </tab>
      <tab heading="javascript code">
        <pre>
          <code class="javascript">
app.controller('SelfCtrl', function($scope) {
  $scope.makeInvitation = function () {
    $scope.$broadcast('to-child', 'Child');
    $scope.$emit('to-parent', 'Parent');
    $scope.$emit('to-brother', 'Brother');
  };
});

app.controller('ParentCtrl', function($scope) {
  $scope.myResponse = 'Parent Node';

  $scope.$on('to-parent', function(event,data) {
    $scope.myResponse = data + ': anytime is OK!';
  });

  $scope.$on('to-brother', function(event,data) {
    $scope.$broadcast('to-another-child', data);
  });

  $scope.reset = function() {
    $scope.myResponse = 'Parent Node';
    $scope.$broadcast('reset');
  };
});

app.controller('ChildCtrl', function($scope){
  $scope.myResponse = 'Child Node';

  $scope.$on('to-child', function(event,data) {
    $scope.myResponse = data + ': anytime is OK!';
  });

  $scope.$on('reset', function(event,data) {
    $scope.myResponse = 'Child Node';
  });
});

app.controller('BrotherCtrl', function($scope){  
  $scope.myResponse = 'Brother Node';

  $scope.$on('to-another-child', function(event,data) {  
    $scope.myResponse = data + ': anytime is OK!';
  });

  $scope.$on('reset', function(event,data) {
    $scope.myResponse = 'Brother Node';
  });
});
          </code>
        </pre>
      </tab>
    </tabset>
  </div>


</div>